<!--
 * @Description: 弹窗
 * @Author: wws1993
 * @Date: 2020-11-25 16:56:10
 * @LastEditTime: 2020-12-11 11:31:26
 * @LastEditors: wws1993
 * @FilePath: \TODO-MANAGER\src\components\ManageModule.vue
-->

<template>
  <el-dialog class="manage" :visible.sync="manage.visible" :before-close="closeManage" append-to-body>
    <div slot="title">
      <span v-if="manage.mode === '新增'">新增</span>
      <span v-else class="max-10">主题：【{{manage.mode}}】- {{manage.form.id}}</span>
    </div>
    <!-- 表单 start -->
    <section class="manage-context">
      <div class="manage-context-form">
        <el-form ref="form" :model="manage.form" label-width="80px">
          <el-form-item label="待办主题">
            <el-input v-model="manage.form.subject" placeholder="这儿写主题" id="autoFocusForEditTodoManage"></el-input>
          </el-form-item>
          <el-form-item label="紧急程度">
            <el-radio v-model="manage.form.weight" :label="1">高</el-radio>
            <el-radio v-model="manage.form.weight" :label="2">中</el-radio>
            <el-radio v-model="manage.form.weight" :label="3">低</el-radio>
          </el-form-item>
          <el-form-item label="详细说明">
            <el-input type="textarea" v-model="manage.form.content" placeholder="这儿写内容"></el-input>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker v-model="manage.form.startTime" type="datetime" format="yyyy-MM-dd hh:mm:ss" placeholder="选择日期时间" :clearable="false"/>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker v-model="manage.form.endTime" type="datetime" format="yyyy-MM-dd hh:mm:ss" placeholder="选择日期时间" :clearable="false"/>
          </el-form-item>
          <el-form-item label="联系人">
            <el-select
              v-model="manage.form.person"
              multiple
              filterable placeholder="请选择联系人"
              >
              <el-option
                v-for="item in mailList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            <i class="el-icon-plus addMail" @click="$store.commit('MailListModule/toggleAdd')"></i>
          </el-form-item>
          <!-- <el-form-item label="相关附件">
              <el-upload
                class="upload-demo"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                multiple
                :limit="3"
              >
                <el-button size="small" type="primary" plain>点击上传</el-button>
              </el-upload>
          </el-form-item>-->
        </el-form>
      </div>
    </section>
    <!-- 表单 end -->
    <div slot="footer">
      <el-button type="info" size="mini" @click="closeManage" plain>取消</el-button>
      <el-button :type="theme" size="mini" @click="saveManage" plain>确定</el-button>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { mapState, mapActions } from 'vuex';

@Component({
  computed: {
    ...mapState({
      theme: (state: any) => state.theme,
      manage: (state: any) => state.manage,
      mailList: (state: any) => state.MailListModule.data,
    }),
  },
  methods: {
    ...mapActions(['closeManage', 'saveManage']),
  },
})
export default class ManageModule extends Vue {}
</script>
